import React, { Component } from "react"
import Template from "components/UI/template"
import { Button } from 'antd'
import { AdvancedTable } from "components/index"
import { messages } from "share/common"
import paymentService from "../pay-workbench/pay-workbench.service"

const { Middle } = Template;

class BatchDetail extends Component{

  service = (page, size) => {
    const { batchId } = this.props.params;
    return paymentService.getBatchDetail({ page, size, batchNo: batchId })
  };

  columns = [
    {
      title: `${messages('finance-4.key59')/*单据编号*/} | ${messages('finance-4.key60')/*单据类型*/}`, width: 165,
      dataIndex: 'documentNumber', render: (value, record) => (<div>
        {record.cashTransactionDataDTO.documentNumber}
        <span className="ant-divider"/>
        {record.cashTransactionDataDTO.documentTypeName}
      </div>)
    },
    {
      title: `${messages('common.user.id')/*工号*/} | ${messages('common.applicant')/*申请人*/}`, width: 115,
      dataIndex: 'employeeName', render: (value, record) => (<div>
        {record.cashTransactionDataDTO.employeeCode}
        <span className="ant-divider" />
        {record.cashTransactionDataDTO.employeeName}
      </div>)
    },
    {
      title: messages('finance-4.key61')/*类型 | 收款方*/, dataIndex: 'partnerCategoryName', width: 115,
      render: (value, record) => (
        <div>
          {record.cashTransactionDataDTO.partnerCategoryName}
          <span className="ant-divider" />
          {record.cashTransactionDataDTO.partnerName}
        </div>
      )
    },
    { title: messages('finance-4.key62')/*收款账号*/, dataIndex: 'accountNumber', render: (value, record) => record.bankPayOrder.accountNumber },
    { title: messages('finance-4.key63')/*备注temp*/, dataIndex: 'remark', render: (value, record) => record.cashTransactionDataDTO.remark },
    { title: messages('common.currency')/*币种*/, dataIndex: 'currency', width: 56, render: (value, record) => record.bankPayOrder.currency },
    { title: messages('finance-4.key64')/*本次支付金额*/, dataIndex: 'amount', width: 110, render: (value, record) => record.bankPayOrder.amount }
  ];

  render() {
    return (
      <Template>
        <Middle>
          <AdvancedTable.SimpleTable
            service={this.service}
            columns={this.columns}
            rowKey={record => record.bankPayOrder.id}
            footer={<Button onClick={() => window.history.go(-1)}>{messages('common.back')/*返回*/}</Button>}
          >
            <h2 className={'second-title'}>{messages('finance-4.key65')/*付款订单批次详情*/}</h2>
          </AdvancedTable.SimpleTable>
        </Middle>
      </Template>
    )
  }

}

export default BatchDetail
